<template>
    <el-dialog
      title="激活您的账户"
      v-model:visible="dialogVisible"
      width="30%"
      @close="handleClose"
    >
      <el-form ref="form1" :model="form1" label-width="80px">
        <el-form-item label="表单1">
          <!-- 表单1的内容 -->
          <el-input v-model="form1.name"></el-input>
        </el-form-item>
      </el-form>
      <el-form ref="form2" :model="form2" label-width="80px">
        <el-form-item label="表单2">
          <!-- 表单2的内容 -->
          <el-input v-model="form2.email"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </template>
    </el-dialog>
  </template>
  
  <script>
  import { ref } from 'vue';
  
  export default {
    setup() {
      const dialogVisible = ref(true);
      const form1 = ref({
        name: '',
      });
      const form2 = ref({
        email: '',
      });
  
      const openDialog = () => {
        dialogVisible.value = true;
      };
  
      const submitForm = () => {
        // 提交表单的逻辑
        console.log('表单1:', form1.value);
        console.log('表单2:', form2.value);
        //dialogVisible.value = false;
      };
  
      const handleClose = () => {
        // 弹窗关闭时的逻辑，例如重置表单
        form1.value = { name: '' };
        form2.value = { email: '' };
      };
  
      return {
        dialogVisible,
        form1,
        form2,
        openDialog,
        submitForm,
        handleClose,
      };
    },
  };
  </script>